<template>
  <div class="w-screen h-screen flex items-stretch overflow-hidden">
    <div class="w-56 h-screen flex-shrink-0">
      <SliderMenu />
    </div>
    <div class="flex-1 flex flex-col">
      <div class="h-14">
        <Header />
      </div>
      <div class="flex-1 overflow-hidden">
        <ElScrollbar>
          <div class="container mx-auto pt-2 pl-2 pr-2">
            <RouterView />
          </div>
        </ElScrollbar>
      </div>
      <div class="h-20 flex items-center justify-center">
        <Footer />
      </div>
    </div>
    <PlayList />
    <LyricList />
  </div>
</template>

<script lang="ts" setup>
import Header from '@/layout/header/Header.vue'
import SliderMenu from '@/layout/slider/SliderMenu.vue'
import Footer from '@/layout/footer/Footer.vue'
import PlayList from '@/components/list/play-list/PlayList.vue'
import LyricList from '@/components/player/LyricList.vue'
</script>

<style lang="less" scoped></style>
